<template>
  <div>
    <p class="u-title">通知</p>
    <ul class="private-box">
      <li v-for="item in arr" :key="item.id">
        <img class="avatarUrl" :src="item.notice.user.avatarUrl" alt="" />
        <div class="private-right">
          <p class="nickname">
            <span class="nameTxt"> {{ item.notice.user.nickname }}</span>
            赞了你的评论
            <span class="lastMsgTime">
              {{ item.time | fmtDate("MM月DD日 hh:mm") }}</span
            >
          </p>
          <p class="txtHide msg">
            {{ item.notice.comment.content }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { msgNotices } from "@/api";
export default {
  data() {
    return {
      limit: 30,
      arr: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      msgNotices({ limit: this.limit }).then((res) => {
        this.arr = res.notices.map((item) => {
          item.notice = JSON.parse(item.notice);
          return item;
        });
        console.log(this.arr);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.private-box {
  li {
    padding: 16px 0;
    display: flex;
    border-bottom: 1px dotted #ccc;
    .avatarUrl {
      width: 40px;
      height: 40px;
      margin-right: 20px;
    }
    .private-right {
      flex: 1;
      overflow: hidden;
      .msg {
        color: #999;
        margin-top: 5px;
      }
      .nickname {
        color: #999;
        .nameTxt {
          color: #000;
          font-size: 12px;
          font-weight: 700;
        }
        .lastMsgTime {
          font-weight: 100;
          font-size: 12px;
          float: right;
        }
      }
    }
  }
}
</style>